<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap {
        width: 100%;
        display: flex;
        margin: 0.2rem 0 0 0;
        position: relative;
      }

      /*左侧的导航样式*/
      .nav_left {
        width: 21.1875rem;
        overflow: scroll;
      }

      .nav_left::-webkit-scrollbar {
        display: none;
      }

      .nav_content {
        white-space: nowrap;
        padding: 0 0.7rem;
        /* overflow-y: hidden; /* 当内容在垂直方向超出时隐藏滚动条，但允许滚动 */
        /* overflow-x: hidden; */ 
      }

      .nav_content span {
        display: inline-block;
        padding: 0.4rem 0.6rem;
        font-size: 0.875rem;
      }

      .nav_content .active {
        border-bottom: 2px solid #7f4395;
        color: #7f4395;
      }

      .nav_left,
      .down {
        float: left;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="wrap">
        <div class="nav_left" id="navLeft">
          <div class="nav_content">
            <span  :class=" selectIndex == index ? 'active' : ''" v-for="(item,index) in arr" :key="item.id"
               v-on:click="selectIndex = index">{{item.first_name}}</span
            >
          </div>
        </div>
      </div>
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          arr: [
            {
              first_id: "0",
              first_name: "热门",
            },
            {
              first_id: "621",
              first_name: "\u5496\u5561",
            },
            {
              first_id: "627",
              first_name: "\u996e\u98df",
            },
            {
              first_id: "279",
              first_name: "\u7537\u88c5",
            },
            {
              first_id: "294",
              first_name: "\u5973\u88c5",
            },
            {
              first_id: "122",
              first_name: "\u773c\u955c",
            },
            {
              first_id: "339",
              first_name: "\u5185\u8863\u914d\u9970",
            },
            {
              first_id: "391",
              first_name: "\u6bcd\u5a74",
            },
            {
              first_id: "35",
              first_name: "\u978b\u9774",
            },
            {
              first_id: "39",
              first_name: "\u8fd0\u52a8",
            },
            {
              first_id: "153",
              first_name: "\u7bb1\u5305",
            },
            {
              first_id: "119",
              first_name: "\u7f8e\u5986\u4e2a\u62a4",
            },
            {
              first_id: "355",
              first_name: "\u5bb6\u7eba",
            },
            {
              first_id: "51",
              first_name: "\u9910\u53a8",
            },
            {
              first_id: "334",
              first_name: "\u7535\u5668",
            },
            {
              first_id: "369",
              first_name: "\u5bb6\u88c5",
            },
            {
              first_id: "10",
              first_name: "\u5bb6\u5177",
            },
            {
              first_id: "223",
              first_name: "\u6570\u7801",
            },
            {
              first_id: "429",
              first_name: "\u6c7d\u914d",
            },
            {
              first_id: "546",
              first_name: "\u5065\u5eb7\u4fdd\u5065",
            },
            {
              first_id: "433",
              first_name: "\u5b9a\u5236",
            },
          ],
          selectIndex:0
        },
      });
    </script>
  </body>
</html>
